﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jQuery.js" type="text/javascript"></script>
     <script src="sourceData.js" type="text/javascript"></script>
    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
        }
        body
        {
            font-size: 12px;
            overflow: hidden;
            color: #333;
        }
        #content
        {
            padding: 10px 20px;
        }
        .box
        {
            border: 1px solid #999;
        }
        #searchBox
        {
            height: 22px;
            line-height: 22px;
            padding-left: 2px;
            margin-bottom: 4px;
        }
        .textbox
        {
            border: 0;
            width: 100%;
            height: 100%;
            line-height: 19px;
            outline: none;
        }
        #resultBox
        {
            overflow: auto;
        }
        
        .resultitemgroup
        {
            margin: 7px;
            padding: 9px;
            background: #A4AFC8;
            font-weight: bold;
        }
        .resultitem
        {
            margin: 7px;
            border: 1px dashed #999;
            padding: 9px;
            background: #fafafa;
        }
        .resultitem .name a
        {
            color: #3F7BD0;
            text-decoration: underline;
        }
        .resultitem .type
        {
            font-weight: bold;
            margin-right: 8px;
        }
        .resultitem .title
        {
            margin: 2px;
        }
        .resultitem .desc
        {
            margin: 6px;
            margin-left: 16px;
        }
        #searchButton
        {
            float: right;
            display: block;
            margin: 1px;
            cursor: pointer;
            width: 30px;
        }
        .searchdisabled, .searchdisabled input
        {
            background: #eee;
        }
        #loadingBox
        {
            position: absolute;
            left: 50%;
            width: 48px;
            height: 48px;
            top: 30%;
            margin-left: -24px; 
            z-index: 99999;
            display: none; padding:0px;
        }
            #loadingBox img {
                width: 48px; margin:0px;
                height: 48px;
            }
        .l-empty
        {
            color:#BBBBBB;
        }
    </style>
    <script type="text/javascript">
        String.prototype.trim = function ()
        {
            return this.replace(/(^\s*)|(\s*$)/g, "");
        }
        function log(message)
        {
            if (window.console && window.console.log) window.console.log(message);
        } 

        $(init);
        var jResultBox;

        var inputMessage = "可以输入任何一个组件的参数、事件或方法的关键字";

        function init()
        {
            jResultBox = $("#resultBox");
            $("#searchButton").click(function ()
            {
                if ($("#searchBox").hasClass("searchdisabled")) return;
                search();
            });
            $("#txtSearch").blur(function ()
            {
                if (this.value == "")
                    $(this).val(inputMessage).addClass("l-empty");
                else
                    $(this).removeClass("l-empty");
            }).focus(function ()
            {
                if ($(this).hasClass("l-empty"))
                {
                    $(this).removeClass("l-empty").val("");
                }
            });
            $(document).keydown(function (e)
            {
                var ev = document.all ? window.event : e;
                if (ev.keyCode == 13)
                {
                    if ($("#searchBox").hasClass("searchdisabled")) return;
                    if ($("#txtSearch").hasClass("l-empty")) return;
                    $("#txtSearch").trigger("blur");
                    search();
                }
            });
            $("#txtSearch").trigger("blur").attr("title", inputMessage);
            var onresize = function ()
            {
                jResultBox.height($(window).height() - jResultBox.offset().top - 50);
                $("#txtSearch").width($("#searchBox").width() - 50);
            };
            $(window).resize(onresize);
            onresize();
        }
        function search()
        {
            if ($("#txtSearch").hasClass("l-empty")) return;
            var key = $("#txtSearch").val();
            if (key == "") return; 
            jResultBox.html("").hide();
            var matchFn = function ($1, $2)
            {
                return new RegExp($2, "i").test($1);
            };
            var datalist = [];
            
            for(var componentName in sourceData)
            {
                for (var type in sourceData[componentName])
                {
                    var items = sourceData[componentName][type];
                    $(items).each(function (i, item)
                    {  
                        if (!matchFn(item.Name, key)) return;
                        datalist.push({
                            component: componentName,
                            type: type,
                            name: item.Name,
                            desc: item.Description,
                            url: item.Url
                        });
                    });
                }
            }

            searchDone(datalist);
        }

        function searchDone(datalist)
        {
            var l = datalist.length;
            if (l == 0)
            {
                jResultBox.html("搜索不到记录");
                return;
            }
            var componentGroups = [];
            var componentItems = [];
            $(datalist).each(function (i, item)
            {
                if (!item) return;
                var component = item['component'];
                var componentIndex = $.inArray(component, componentGroups);
                if (componentIndex == -1)
                {
                    componentGroups.push(component);
                    componentIndex = componentGroups.length - 1;
                    componentItems.push([]);
                }
                componentItems[componentIndex].push(item);
            });
            $(componentGroups).each(function (i, component)
            {
                appendResultItems(component, componentItems[i]);
            });
            jResultBox.show(); 
        }
        function appendResultItems(component, dataItems)
        {
            jResultBox.append("<div class='resultitemgroup' component='" + component + "'>" + component + "</div>");
            for (var i = 0, l = dataItems.length; i < l; i++)
            {
                jResultBox.append(createResultItemBox(dataItems[i]));
            }
        }
        function createResultItemBox(data)
        {
            function getTypeDesc()
            {
                if (data.type == "parms" || data.type == "parm") return "参数";
                if (data.type == "event") return "事件";
                if (data.type == "method") return "方法";
                return data.type;
            } 
            var item = $("<div class='resultitem'></div>"); 
            var itemtitle = $("<div class='title'></div>");
            itemtitle.append("<span class='type'>" + getTypeDesc() + "</span>");
            itemtitle.append("<span class='name'><a href='" + data.url + "'>" + data.name + "</a></span>");
            item.append(itemtitle);
            item.append("<div class='desc'>" + data.desc + "</div>");
            return item;
        }  

    </script>
</head>
<body> 
    <div id="content">
        <div id="searchBox" class="box">
            <span id="searchButton">搜索</span>
            <input type="text" id="txtSearch" class="textbox" />
        </div>
        <div id="resultBox" class="box" style="display: none">
        </div>
    </div>
</body>
</html>
